<template>
  <div class="course-list">
    <div class="list" v-if="isHave == true">
      <course-item :course="getListItem" />
    </div>
    <div class="noList" v-else>没有你要找的课程</div>
  </div>
</template>

<script>
import CourseItem from '@/components/content/course/CourseItem';

import Bus from '@/common/bus';

export default {
  name: 'CourseList',
  components: { CourseItem },
  data() {
    return {
      isHave: true,
      list: [],
      course: [
        // { name: 'Python', detail: '这是一个简介', teacher: '刘 琳', picUrl: '/src/assets/image/CourseMenu/coursePic.png' },
        // { name: 'Android', detail: '这是一个简介', teacher: '刘 琳', picUrl: '/src/assets/image/CourseMenu/coursePic.png' },
        // { name: 'Java', detail: '这是一个简介', teacher: '刘 琳', picUrl: '/src/assets/image/CourseMenu/coursePic.png' },
      ],
      iid: 0,
    };
  },
  computed: {
    getListItem() {
      return this.list.length != 0 ? this.list : this.course;
    },
  },
  mounted() {
    this._initList();
  },
  created() {
    this._getData();
  },
  methods: {
    _getData() {
      this.iid = this.$store.state.user.id;

      this.$http({
        url: this.$http.adornUrl(`/edu-course/s_selectCourseByStuId/${this.iid}`), //http://localhost:8082/eduservice/edu-teacher/teacher/20205532
        method: 'get',
        params: this.$http.adornParams(),
      }).then(({ data }) => {
        if (data && data.code == 20000) {
          var el = data.data.courseList;
          // console.log(data);
        } else {
          this.$message.error('数据获取失败');
        }
      });
    },
    _initList() {
      Bus.$on('searchVal', (val) => {
        this.list = [];
        this.currentInner = val;
        for (const item of this.course) {
          if (item.name.indexOf(val) != -1) {
            this.list.push(item);
          }

          if (this.list.length != 0) {
            this.isHave = true;
          } else {
            this.isHave = false;
          }
        }
      });
    },
  },
  beforeDestroy() {
    Bus.$off('searchVal');
  },
};
</script>

<style scoped>
.list,
.noList {
  height: 500px;
  margin-top: 20px;
  padding: 30px 30px 0;
  border-radius: 8px;
  background-color: #fff;
  box-shadow: 0 2px 10px 0 #edeef080;
  overflow: auto;
}
.noList {
  position: relative;
  text-align: center;
  line-height: 320px;
  color: #99a2aa;
}
.noList::before {
  content: '';
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: inline-block;
  height: 200px;
  width: 380px;
  background: url(/src/assets/image/StudentProfile/nodata.png) no-repeat;
}
</style>